<template>
<div class="hasData">
    <!-- 显示我的关注 -->
    <div class="ListeningRecord">
        <div class="ListeningRecordLeft" v-show="!isShowSelect">{{totalRow}}个关注</div>
        <!-- 全选按钮 -->
        <div class="ListeningRecordLeft multipleCheckBox" v-show="isShowSelect" @click="multipleSelectBtn">
            <div class="selectBox">
                <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan@2x.png" v-show="isMultipled" />
            </div>
            <span>全选</span>
        </div>
        <div class="ListeningRecordRight">
            <div class="multipleCheck" v-show="!isShowSelect" @click="selectHandle">
                <img class="listenIcon" src="https://youyang-cdn.mdshuzhi.com/upload/icon_duoxuan@2x.png" />

                <div class="listenText">多选</div>
            </div>
            <div class="listenText" style="color:#F86342" v-show="isShowSelect" @click="multipledUnsubscribeBtn">取消关注{{isSelected}}个已选</div>
        </div>
    </div>
    <scroller :on-infinite="infinite" ref="myscroller" class="MyconcernWrap">
        <div class="MyconcernItem" v-for="(item,index) in list" :key="index">
            <!-- 选择按钮 -->
            <div class="selectBox" v-show="isShowSelect" @click="singleSelectBtn(item.id)">
                <img src="../../../static/images/icon_gouxuan@2x.png" v-show="item.select" />
            </div>
            <div class="concernInfos">
                <div class="concernInfosLeft">
                    <div class="concernInfosImg">
                        <img :src="item.portrait" />
                    </div>
                    <div class="userInfos">
                        <div class="userName">{{item.nick}}</div>
                        <div class="Number">粉丝数 {{item.fansCount}} | 总时长 {{item.listenTimes}}h</div>
                    </div>
                </div>
                <div class="concernInfosRight" @click="UnsubscribeBtn(item.id)">取消关注</div>
            </div>
        </div>
        <!-- 已经到底了哦~ -->
        <div class="theEndOf">
            <div class="findFriend" @click="toFindFriend">找朋友</div>
        </div>
    </scroller>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import {
    Toast
} from "mint-ui";

export default {
    name: "MyConcerns",
    data() {
        return {
            list: [],
            isShowSelect: false, //是否显示选择按钮
            isShowSingleSelect: false, //是否点击当个选择按钮
            currentId: null, //当前歌曲的id
            lastPage: false,
            pageNumber: 1,
            totalRow: null,
            multipleList: [], //存储选中的id
            isSelected: 0,
            isMultipled: false, //是否已全选
        };
    },
    timer: null,
    created() {
        this.getFollowList();
        window.addEventListener('mousewheel',this.handleScroll);
    },
    destroyed(){
      window.removeEventListener('mousewheel',this.handleScroll)
    },
    watch: {
        isShowSelect() {
            console.log("musicList更新");

            this.list = this.list;
        },
    },
    //方法集合
    methods: {
				handleScroll(e){
				  let that = this  //此this指向的是vue
				  console.log(e.wheelDelta)
				  if (e.wheelDelta < 0) {
				      that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
				  } else {
				    that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
				  }
				},
        // 获取我关注的人列表数据
        getFollowList() {
            let that = this;
            console.log("pageNumber", this.pageNumber)
            let params = {
                page: this.pageNumber,
            };
            controller.followList(params).then((res) => {
                console.log("获取我关注的人列表数据", res);
                let list = that.list;
                res.baseData.list.map((item) => {
                    item.listenTimes = (item.listenTimes / 60 / 60).toFixed(2);
                    list.push(item);
                });
                that.list = list;
                that.lastPage = res.baseData.lastPage;
                that.totalRow = res.baseData.totalRow;
            });
        },
        // 多选按钮
        selectHandle() {
            console.log("多选按钮");
            this.isShowSelect = !this.isShowSelect;
        },
        // 单个选择按钮
        singleSelectBtn(id) {
            // let id = parseInt(e.currentTarget.dataset.id);
            let isMultipled = this.isMultipled; //是否全选
            let isSelected = this.isSelected; //已选多少个
            let multipleList = this.multipleList; //存储选中的id
            let list = this.list;
            // 判断是否已经选中
            if (multipleList.includes(id)) {
                // 选中的，就直接删除掉
                let idx = multipleList.indexOf(id);
                multipleList.splice(idx, 1);
                isSelected--;
                isMultipled = false;
            } else {
                multipleList.push(id);
                // 判断是否全选
                if (multipleList.length == list.length) {
                    isMultipled = true;
                }
                isSelected++;
            }

            for (let item of list) {
                if (multipleList.includes(item.id)) {
                    item.select = true;
                } else {
                    item.select = false;
                }
            }
            console.log("单个选择按钮", id, isSelected, list);

            this.isShowSingleSelect = true;
            this.currentId = id;
            this.multipleList = multipleList;
            this.isSelected = isSelected;
            this.isMultipled = isMultipled;
            this.list = list;
        },
        // 全选按钮
        multipleSelectBtn() {
            console.log("全选按钮");
            let multipleList = this.multipleList; //存储选中的id
            let isMultipled = this.isMultipled; //是否全选
            let isSelected = this.isSelected; //已选多少个
            let list = this.list;
            if (multipleList.length != 0) {
                if (multipleList.length == list.length) {
                    multipleList.length = 0;
                    isMultipled = false;
                    isSelected = 0;
                    list.map((item) => {
                        item.select = false;
                    });
                } else {
                    list.map((item) => {
                        if (!item.select) {
                            item.select = true;
                            multipleList.push(item.id);
                        }
                    });
                    isMultipled = true;
                    isSelected = list.length;
                }
            } else {
                list.map((item) => {
                    item.select = true;
                    multipleList.push(item.id);
                });
                isMultipled = true;
                isSelected = list.length;
            }
            this.multipleList = multipleList;
            this.isMultipled = isMultipled;
            this.isSelected = isSelected;
            this.list = list;
        },
        // 多个取消关注按钮
        multipledUnsubscribeBtn() {
            let multipleList = this.multipleList;
            let str = multipleList.join(",");
            let that = this;
            if (multipleList.length != 0) {
                // 弹出窗
                controller
                    .delFollow({
                        followedUserIds: str,
                    })
                    .then((res) => {
                        Toast({
                            message: "取消关注成功",
                            duration: 1500,
                            iconClass: "icon icon-success",
                        });
                        that.timer = setTimeout(() => {
                            that.isShowSelect = true;
                            that.isSelected = 0;
                            that.multipleList = [];
                            that.pageNumber = 1;
                            that.list = [];
                            that.isMultipled = false;
                            that.getFollowList();
                        }, 500);
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            } else {
                Toast({
                    message: "请选择用户",
                    duration: 2000,
                });
            }
        },
        // 单个取消关注按钮
        UnsubscribeBtn(id) {
            let that = this;
            console.log("取消关注按钮", id);
            controller
                .delFollow({
                    followedUserIds: id,
                })
                .then((res) => {
                    console.log(res);
                    that.list = [];
                    Toast({
                        message: "取消关注成功",
                        duration: 2000,
                        iconClass: "icon icon-success",
                    });
                    that.timer = setTimeout(() => {
                        that.getFollowList();
                    });
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 去找朋友按钮
        toFindFriend() {
            this.$router.push('/Talent')
        },
        // 上拉加载
        infinite(done) {
            let _self = this
            console.log("lastPage", this.lastPage);
            setTimeout(() => {
                if (this.lastPage) {
                    this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
                } else {
                    console.log("进行下一次加载操作");
                    _self.pageNumber++;
                    console.log("pageNumber", _self.pageNumber)
                    _self.getFollowList();
                    done(); //进行下一次加载操作
                }
            }, 1500);

        },
    },
    destroyed() {
        clearTimeout(this.timer);
    },
};
</script>

<style lang="scss" scoped>
/* 有数据 */
.hasData {
    width: 100%;
    min-width: 640px;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #fff;

    .ListeningRecord {
        width: 100%;
        padding: 0 26px;
        box-sizing: border-box;
        height: 87px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .ListeningRecordLeft,
        .listenText {
            font-size: 24px;
            color: #a8acbb;
        }

        .listenIcon {
            margin-right: 11px;
            width: 24px;
            height: 23px;
        }

        .ListeningRecordRight {
            .multipleCheck {
                display: flex;
                align-items: center;
            }
        }
    }

    /* 我得关注 */
    /deep/ ._v-container{
      top: 87px;
      bottom: 15px !important;
      left: 50%;
      transform: translateX(-50%);
      height: calc(100vh - 87px) !important;
			._v-content{
			  padding-bottom: 55px;
			}
    }
    .MyconcernWrap {
        width: 100%;
        min-width: 640px;
        max-width: 960px;
        margin: 0 auto;
        padding: 0 26px;
        box-sizing: border-box;

        .MyconcernItem {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;

            /* 关注信息 */
            .concernInfos {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .concernInfosLeft {
                    display: flex;
                    align-items: center;

                    .concernInfosImg {
                        width: 78px;
                        height: 78px;
                        border-radius: 50%;
                        overflow: hidden;
                        margin-right: 16px;

                        img {
                            width: 78px;
                            height: 78px;
                        }
                    }

                    .userInfos {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        .userName {
                            font-size: 30px;
                            color: #333333;
                        }

                        .Number {
                            font-size: 20px;
                            color: #a8acbb;
                        }
                    }
                }

                /* 关注按钮 */
                .concernInfosRight {
                    width: 144px;
                    line-height: 48px;
                    font-size: 24px;
                    color: #a8acbb;
                    border-radius: 24px;
                    border: 2px solid #a8acbb;
                    text-align: center;
                }
            }
        }

        /* 已经到底了哦 */
        .theEndOf {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            span {
                display: inline-block;
                line-height: 35px;
                font-size: 26px;
                color: #a8acbb;
            }

            /* 找朋友 */
            .findFriend {
                width: 240px;
                height: 68px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #f86342;
                font-size: 30px;
                border-radius: 34px;
                border: 2px solid #f86342;
                margin-top: 32px;
            }
        }
    }
}

/* 全选按钮 */
.multipleCheckBox {
    width: 250px;
    display: flex;
}

.multipleCheckBox img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #a8acbb;
    margin-right: 24px;
    position: relative;
}

/* 选择框 */
.selectBox {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #a8acbb;
    margin-right: 24px;
    position: relative;

    img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(1.1);
    }
}
</style>
